<script setup>
import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
import {ref,onMounted} from 'vue'
let firstThree = ref()

const scene = new THREE.Scene()

const group = new THREE.Group()
scene.add(group)

const geometry = new THREE.BufferGeometry();
const plane = new THREE.PlaneGeometry(500,500);
const box = new THREE.BoxGeometry(100,100,100)
const vertors = new Float32Array([
  0,0,0,
  160,0,0,
  160,80,0,
  0,80,0,
])

const attribut = new THREE.BufferAttribute(vertors,3);
geometry.attributes.position = attribut;

const indexes = new Uint16Array([
  0,1,2,0,2,3
])
geometry.index = new THREE.BufferAttribute(indexes,1);

const uvs = new Float32Array([
  0,0,
  0,0.5,
  0.5,0.5,
  0,0.5
])
geometry.attributes.uv = new THREE.BufferAttribute(uvs,2)

/**
 * 这里想实现一个铺满瓷砖的功能，但是默认是一张贴图铺满整个平面的，所以要做一下操作
 */
let texture1 = new THREE.TextureLoader().load("/public/cz.png")
// 允许阵列模式
texture1.wrapS = THREE.RepeatWrapping;
texture1.wrapT = THREE.RepeatWrapping;
texture1.repeat.set(10,10)
let metaerial = new THREE.MeshBasicMaterial({
  map:texture1
})
let mesh = new THREE.Mesh(plane,metaerial)
mesh.position.set(0,0,0)
mesh.rotateX(-Math.PI / 2)
group.add(mesh)

const axeshelper = new THREE.AxesHelper(100);
scene.add(axeshelper)

// 环境光
const ambient = new THREE.AmbientLight("#fff",0.8)
scene.add(ambient)

const width = window.innerWidth;
const height = window.innerHeight;

const camera = new THREE.PerspectiveCamera(100,width/height,1,8000)
camera.position.set(100,100,200)
camera.lookAt(0,0,0) 


// 解决渲染出来的图像有锯齿
const renderer = new THREE.WebGLRenderer({
  antialias:true
});
renderer.setSize(width,height)
renderer.render(scene,camera)

const controls = new OrbitControls(camera,renderer.domElement)
controls.addEventListener("change",function(){
  renderer.render(scene,camera)
})
onMounted(()=>{
  document.getElementById("firstThree").appendChild(renderer.domElement)
})

</script>

<template>
  <div>
    <div id="firstThree" ref="firstThree"></div>
  </div>
</template>

<style scoped>
  #firstThree{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
  }
</style>
